<template>
  <a-select class="a-select-v2" dropdownClassName="a-select-dropdown" :bordered="false" size="small" defaultActiveFirstOption :style="{ width }" v-model:value="inputValue">
    <a-select-option v-for="(e, i) in items" :key="e.key" :value="e.key">{{ e.text || e.name }}</a-select-option>
  </a-select>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  name: 'a-select-box-v2',
  props: {
    width: {
      type: String,
      default: '200px'
    },
    value: {
      type: String,
      default: ''
    },
    options: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {};
  },
  computed: {
    items() {
      const { options } = this;
      if (options && options.length) {
        return options;
      }
      return [{
          key: '',
          text: '请选择'
      }];
    },
    inputValue: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('update:value', val);
        const opt = this.options.filter(e=>e.key===val)[0];
        opt && opt.onselect && opt.onselect();
      }
    }
  },
  methods: {}
});
</script>

<style lang="less">
.a-select-v2 {
  .ant-select-selector {
    background-color: rgba(0, 0, 0, 0.75) !important;
  }
}
.a-select-dropdown {
  &.ant-select-dropdown {
    background-color: rgba(0, 0, 0, 1) !important;
    &:hover {
      background-color: rgba(0, 0, 0, 1) !important;
    }
  }
  .ant-select-item {
    padding: 0 12px;
    line-height: 2em;
    min-height: 2em;
    &:hover {
      background-color: rgba(0, 0, 100, 1) !important;
    }
  }
  .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
    background-color: rgba(0, 0, 0, 0.75) !important;
  }
}
</style>
